從頭到尾硬幹一個網站是非常費功費時的事情，為了節省開發時間就會盡量引用現成的套件，隨著引用的套件越來越多，就會需要管理這些套件的種類、版本，接著就來學習套件管理工具的使用。

1. Node.js & NPM

過去 JavaScript 大多只用在前端，Node.js 出現後跨足到了後端領域，NPM（Node Package Manager） 是包含在 Node.js 內的套件管理工具，雖然前端工程師在學習初期不會接觸到後端伺服器的架設，但 NPM 是無論前後端都會學習、使用到的重要工具。

2. Yarn

Yarn 也是一個套件管理工具，在安裝速度、安全性及穩定性相對 NPM 都較好，操作指令也大致相同，在團隊開發時可以確認使用的管理工具，不宜將 NPM 和 Yarn 混用，可能會有些設定上的問題。

3. 安裝步驟

1. 到官方網站下載 Node.js 安裝檔（建議選左邊的 LTS 穩定支援版本）

2. NPM 在 Node.js內，無需另外安裝，我們可以使用 npm 指令下載 yarn

$ npm install --g yarn

官網連結
Node.js
Yarn

3. 完成後可以輸入指令查詢版本

// Node.js
$ node -v

// NPM
$ npm -v

// Yarn
$ yarn -v

本篇文章撰寫時使用的套件版本

4. Node.js 簡易操作

因為這次文章不會練習到伺服器功能，這邊只簡單介紹

1. 進入 node.js

$ node

2. 可以試著讓他吐一點東西出來

$ console.log('Hello, world!')

3. 看看有哪些指令可用

$ .help

4. 離開 node.js

$ .exit

5. NPM 起手勢

1. 新增一個專案資料夾

2. 使用 VS Code 開啟專案資料夾

3. 切換到終端機介面（ctrl + `）

4. 初始化
   輸入指令後，會依序詢問『專案名稱、版本、描述、進入點、測試指令、Git儲存庫、關鍵字、作者、授權方式』，不知道要打什麼的時候就一路 Enter 到底就好，會套用預設值（寫在小括弧內）。

   $ npm init
   
   // 跳過環境設定，直接用預設值建立。
   $ npm init -y
   

6. 安裝／移除套件

1. 大部分的套件安裝只要輸入指令 npm install 套件名稱 或是簡寫 npm i 套件名稱即可：

   // Bootstrap
   $ npm install bootstrap
   
   // Font Awesome
   $ npm i fontawesome
   
   // MacOS 如果遇到權限不足的錯誤，在指令前方加上 sudo，並且提供使用者帳號密碼
   $ sudo npm install 套件名稱
   

2. 移除套件指令是npm uninstall 套件名稱 或是簡寫 npm r 套件名稱，r 在此為 remove 的縮寫。

7. 檔案功用說明

裝完管理工具和套件後，專案資料夾會多了一些檔案，功用分別如下：

1. package.json

• 是整個專案的縮影，記錄了基本資訊、指令定義和使用的套件種類、版本...等資訊，團隊合作時，不需將所有相依套件打包提供其他成員下載，其他成員只需要取得 package.json 檔案後執行 npm install(i) 指令，就會自動安裝成相同的開發環境了。
• 在安裝套件後，package.json 檔案內的 dependencies 記錄套件名稱、版本資訊，通常版本的數字前面會有一個 ^ 符號，表示如有更新的版本就會下載最新的。

2. package-lock.json

• 工作團隊成員可能加入的時間不同，當新成員執行 npm i 指令時可能會有部分的套件下載到更新的版本，如果希望團隊的套件版本一致，就可以把這個 package-lock.json 也提供給其他成員，裡面會指定下載的版本；反之，如果希望團隊成員都使用最新版本，就不需要提供這個檔案

3. node-modules 裡面存放著下載回來的套件實體檔案。
   

8. 全域安裝

套件安裝在全域環境中，就不需在個別專案重複安裝。

全域安裝通常用在僅個人使用的本地套件，例如：安裝本地的套件管理工具 Yarn。

$ npm install -g 套件名稱

9. 開發版本

有些套件是上線時會使用（例如：jQuery, Bootstrap...），有些是僅在開發中使用（例如：Webpack, 各種預處理器...），開發用的套件並不需要上線部署，所以我們可以把它分成開發、上線兩類存放。

1. 上線版：前面學到的指令就是上線版，在某些較舊的文章會看到需要加上 --save 這個參數，在 npm5 版本以後這已經是預設值，不需要另外撰寫。
2. 開發版：

• npm install -dev 套件名稱 或是簡寫成 npm i -D 套件名稱（注意，D需要是大寫）。
• 開發版的套件會註記在 package.json 中的 "devDependencies" 屬性，和上線版的 "dependencies" 不同，可以觀察一下確認是否成功裝對位置。
  

10. NPM 與 Yarn 指令對照

在完成了基本的練習後，也可以試著使用 Yarn 從頭做一次
NPM | Yarn | 說明
------------- | -------------
npm install | yarn install | 安裝所有 dependencies 內的套件
npm install 套件名稱 | yarn add 套件名稱 | 安裝指定套件(上線版)
npm install -D 套件名稱 | yarn add -D 套件名稱 | 安裝指定套件(開發版)
npm install —g 套件名稱 | yarn global add 套件名稱 | 全域安裝指定套件
npm uninstall 套件名稱 | yarn remove 套件名稱 | 移除指定套件
npm update | yarn upgrade | 更新所有 dependencies 內的套件
npm update 套件名稱 | yarn upgrade 套件名稱 | 更新指定套件

詳細指令比較參考網站
(Cheat Sheet: npm vs Yarn Commands)[https://www.digitalocean.com/community/tutorials/nodejs-npm-yarn-cheatsheet]